<template>
	<div class="canshu flex">
    <left2></left2>
    <div style="width: calc(100vw - 200px); height: 100vh; overflow: auto;"  class="animate__animated animate__fadeIn">
      <div class="flex">
        <div style="width: 380px; height: 100vh; padding: 20px; background: #FFFFFF; overflow: auto; position: relative;">
          <el-tree  class="filter-tree" @node-click="handleNodeClick" @node-contextmenu="openMenu" :data="data" :props="defaultProps" node-key="treeId"
                    :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
          </el-tree>

          <!-- <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >
            <div class="li" @click="logshow" v-if="youjiandangqian.type == 1">添加轴管理</div>
          </div> -->
        </div>

        <div class="youbian" style=" width: calc(100vw - 650px);">

          <div style="padding: 30px; " v-if="search2.param.devId">
              <div class="flexc" style="margin-bottom: 20px;">
                <div>
                  <el-select v-model="search2.param.handle" style="width: 200px; margin-right: 20px;"  clearable filterable placeholder="请选择处置状态">
                      <el-option label="处置过" :value="true"></el-option>
                      <el-option label="未处置过" :value="false"></el-option>

                  </el-select>
                </div>
                <div>
                  <el-date-picker v-model="times" @change="timechange" style=" margin-right: 20px;"
                   :clearable='true' value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
                    range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
                <el-button type="primary" @click="searchgo2()">检索</el-button>
              </div>

              <el-table :data="list2" style="width: 100%;">
                <el-table-column align="center" prop="beginTime" label="开始时间"></el-table-column>
                <el-table-column align="center" prop="endTime" label="结束时间"></el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <div class="flexcc">
                      <div style="color: #0093F6; cursor: pointer; margin: 0 10px;" @click="bianji(scope.row)">处置</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </div>
        </div>
      </div>

      <el-dialog title="处理报错" center :visible.sync="log" width="600px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
          <div class="flexc" style="margin-bottom: 20px;">
            <div style="width: 100px; text-align: right;">处置状态</div>
            <div>
              <el-select v-model="all.devState" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择处置状态">
                  <el-option label="观察中" value="1"></el-option>
                  <el-option label="待反馈" value="2"></el-option>
                  <el-option label="关闭" value="3"></el-option>
              </el-select>
            </div>
          </div>
          <div class="flexc" style="margin-bottom: 20px;">
            <div style="width: 100px; text-align: right;">处理理由</div>
            <div><el-input v-model="all.handleMsg" style="width: 350px; margin-left: 30px;" placeholder="请输入处理理由"></el-input></div>
          </div>

      	  <span slot="footer" class="dialog-footer">
            <el-button type="danger" round @click="log = false">取消</el-button>
            <el-button type="danger" round @click="add">确定</el-button>
      	  </span>
      </el-dialog>
	</div>
</template>

<script>
import { gettreeshebei } from '@/api/xitong'

import { geterror,handleerror } from '@/api/baocuorizhi'
  // import { getxiala } from '@/api/zidian'
  import left2 from '@/view/left2.vue'
	export default {
		name: 'baocuorizhi',
    components:{
      left2
    },
		data() {
			return {
        list2:[],
        search2:{
            "page":1,
            "size":10,
            "param":{
              "handle":"",
              "devId":"",
              beginTime:"",
              endTime:""
            }
        },
        times:[],
        total2:0,

        defaultProps: {
          children: 'children',
          label: 'label'
        },


        dangqianxuanzeshebei:"",

        xialaall:{
          devStatelist:"",
          strategylist:""
        },
        data:[],

        menuVisible: false,
        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[],

        log:false,
        all:""
			}
		},
		created() {
      this.getshebi()
      this.getlist2()
		},
		mounted() {

		},
		methods: {
      timechange:function(val){
        if (this.times == null) {
        	this.search2.param.beginTime = ''
        	this.search2.param.endTime = ''
        } else {
        	this.search2.param.beginTime = this.times[0]
        	this.search2.param.endTime = this.times[1]
        }
      },
      searchgo2:function(){
        this.search2.page = 1
        this.getlist2()
      },
      //翻页
      fanye2:function(val){
        this.search2.page = val
        this.getlist2()
      },

      //获取
      getlist2:function(){
        geterror(this.search2).then((response)=>{
          this.list2 = response.data.result
          this.total2 = response.data.count
        })
      },

      //处理
      bianji:function(item){
        this.all = {
          "errorLogId": item.errorLogId,
          "handleStatus":item.handleStatus,
          "handleMsg":item.handleMsg,
        }
        this.log = true
      },

      //确定
      add:function(){
        handleerror(this.all).then((response)=>{
          this.$message.success('处理成功');
          this.log = false
          this.getlist()
        })
      },

      //打开右键弹框
      openMenu(event, data, node, element) {
        // console.log(data)
        // //右键临时赋值
        // this.youjiandangqian = data
        // this.menuPosition.x = event.clientX;
        // this.menuPosition.y = event.clientY;
        // this.menuVisible = true;
        // event.preventDefault();

        // document.addEventListener('click', this.closeMenu);
      },
      //关闭
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },

      //获取树 下面树相关点击方法
      getshebi:function(){
        gettreeshebei().then(response => {
          this.data = response.data
        })
      },
      handleCommand:function(val){
        this.youjiandangqian = ''
      },
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },
      handleNodeClick(data) {
        this.menuVisible = false;

        if(data.type == 1){
          this.search2.param.devId = data.value
          this.getlist2()
        }
      },
      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
		}
	}
</script>


<style scoped >
  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }
</style>
